import { handleDeleteReview } from '@/services/center';
import { Col, Flex, message, Row } from 'antd';
import dayjs from 'dayjs';
import { getLocale, useIntl } from 'umi';

type IProps = {
  data: any;
  onDelete?: (id: number) => void;
};

const CommentCard: React.FC<IProps> = ({ data = [], onDelete }) => {
  const intl = useIntl();
  const isEn = getLocale() == 'en-US';

  return (
    <Row gutter={[0, 20]}>
      {data?.length > 0 &&
        data?.map((item: any) => {
          const { id, createdDate, score, userName, content, userId } = item;
          return (
            <Col span={24} key={id}>
              <Flex gap={23}>
                <Flex
                  style={{ fontSize: 20, fontWeight: 700, marginTop: 19, width: isEn ? 90 : 50 }}
                >
                  {score.toFixed(1)}
                  {intl.formatMessage({ id: 'home.points' })}
                </Flex>
                <Flex
                  flex={1}
                  style={{
                    flexDirection: 'column',
                    background: '#F5F6F8',
                    color: '#666',
                    padding: 20,
                    borderRadius: 6,
                  }}
                >
                  <Flex flex={1} justify="space-between">
                    <Flex gap={8}>
                      <div style={{ width: 3, height: 3, background: '#666', marginTop: 10 }} />
                      <div style={{ fontWeight: 700, marginBottom: 5 }}>{userName || '/'}</div>
                    </Flex>
                    <Flex gap={8}>
                      <div>{dayjs(createdDate).format('YYYY.MM.DD')}</div>
                      {userId ? (
                        <div
                          onClick={async () => {
                            await handleDeleteReview({ id });
                            message.success(intl.formatMessage({ id: 'home.delete_suc' }));
                            if (onDelete) {
                              onDelete(id);
                            }
                          }}
                          style={{ cursor: 'pointer' }}
                          className="text_blue"
                        >
                          {intl.formatMessage({ id: 'home.delete' })}
                        </div>
                      ) : null}
                    </Flex>
                  </Flex>
                  <div style={{ lineHeight: '20px', wordBreak: 'break-all', marginLeft: 11 }}>
                    {content}
                  </div>
                </Flex>
              </Flex>
            </Col>
          );
        })}
    </Row>
  );
};
export default CommentCard;
